<template>
  <div id="WordCloud">
    <!-- 词云图 -->
    <!-- 确定颜色 -->
    <!-- 形状 -->
    <div ref="wordCloud" :wordData="wordData" class="wordBox"></div>
    <div class="pop" v-if="isPop">
      <div class="clone" @click="isPop=false">关闭</div>
      <div class="title">突发事件标题</div>
      <div class="content">
        <p>发布单位: </p>
        <p>发布时间: </p>
        <p>涉及区域: </p>
        <p>涉及事项: </p>
        <p>影响因素: </p>
        <p>具体内容: </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "WordCloud",
  props: {
    wordData: Array | Object,
    sizeRange: Array | Object,
  },
  data() {
    return {
      isPop: false
    };
  },
  created() {},
  mounted() {
    this.drawWordCloud();
  },
  methods: {
    drawWordCloud() {
      let that = this;
      let myChart2 = that.$echarts.init(that.$refs.wordCloud);
      myChart2.on('click',function (param) {
        // console.log(param)
        that.isPop = true;
      }) 
      var maskImage = new Image();
      let option = {
      series: [
      {
        type: 'wordCloud',
        shape: 'pentagon',
        left: 'center',
        top: 'center',
        width: '100%',
        height: '100%',
        right: null,
        bottom: null,
        sizeRange: [15,30],
        rotationRange: [0, 0],
        rotationStep: 0,
        gridSize: 25,
        drawOutOfBound: false,
        layoutAnimation: true,
        textStyle: {
          fontFamily: 'PingFangSC-Semibold',
          fontWeight: 600,
          color: function () {
            let colorList = ['#ff7372', '#f5de5a'];
            let color = colorList[Math.floor(Math.random() * colorList.length)];
            console.log(color)
            return color;
          }
        },
        emphasis: {
          focus: 'none',
        },
        data: that.wordData,
      },
        ],
      };
      myChart2.setOption(option);
      window.addEventListener("resize", function () {
        myChart2.resize();
      });
    },
  },
};
</script>
<style lang="less" scoped>
#WordCloud {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
  .pop{
    width: 250px;
    height: 302px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background: url("~@/assets/images/sImg/map-cont.png") no-repeat;
    .title{
      width: 76%;
      height: 40px;
      position: absolute;
      top: 11px;
      right: 0;
      line-height: 40px;
      padding-left: 10px;
      box-sizing: border-box;
      color: #fff;
    }
    .content{
      width: 88%;
      height: 240px;
      position: absolute;
      bottom: 0px;
      right: 0px;
      color: #fff;
      padding-left: 10px;
      box-sizing: border-box;
    }
    .clone{
      position: absolute;
      top: -14px;
      right: 0px;
      padding: 4px 14px;
      border: 1px solid #d9e4fa;
      box-sizing: border-box;
      border-radius: 4px;
      font-size: 12px;
      color: #fff;
      cursor: pointer;
    }
  }
  .wordBox {
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }
}
</style>